<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>

  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      max-height: 100vh;
      position: relative;
      font-family: sans-serif;
      font-size: 16px;
      background: linear-gradient(141deg, #d88671 0%, #a6d6db 51%, #d8df9d 75%);
      overflow: hidden;
    }

    #ckLine {
      width: 100%;
      height: 100vh;
    }
  </style>
</head>

<body>
  <div class="htmleaf-container">
    <svg id="ckLine" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000"></svg>
  </div>
  </div>

  <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
  <script>
    window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
  </script>
  <script>
    (function($) {
      'use strict';
      $.fn.ckLine = function(options) {
        var viewportwidth = this.width(),
          viewportHeight = this.height(),
          $el = this.attr('id'),
          interval = null,
          settings = $.extend({
            svgId: null,
            strokeColor: "#000",
            strokeWidth: 2,
            animateTime: 1000,
            interval: 600,
            fadeOutTime: 800,
            lifeTime: 2000,
            width: viewportwidth,
            height: viewportHeight,
            leftRight: true,
            easing: 'swing',
            animationTimeRange: null
          }, options);
        $.fn.ckLine.destroy = function() {
          if (interval) {
            clearInterval(interval);
          }
        };

        function creatLine(width, height) {
          var startItemsWidth = new Array(0, width),
            ramdomItemWidth = startItemsWidth[Math.floor(Math.random() * startItemsWidth.length)],
            startItemsHeight = new Array(0, height),
            ramdomItemHeight = startItemsHeight[Math.floor(Math.random() * startItemsHeight.length)];
          var svgns = "http://www.w3.org/2000/svg";
          var x1 = ramdomItemWidth,
            y1 = Math.random() * height,
            x2,
            y2 = Math.random() * height;
          var randomBool = true;
          if (settings.leftRight === false) {
            randomBool = Math.random() >= 0.5;
          }
          if (randomBool == true) {
            x1 = ramdomItemWidth
            if (ramdomItemWidth === 0) {
              x2 = width;
            } else {
              x2 = 0;
            }
          } else {
            var range1 = Math.floor(Math.random() * width) + 0;
            var range2 = Math.floor(Math.random() * width) + 0;
            x1 = range1;
            x2 = range2;
            y1 = ramdomItemHeight;
            if (ramdomItemHeight === 0) {
              y2 = height;
            } else {
              y2 = 0;
            }
          }
          //var line = document.createElementNS(svgns, 'line');
          var line = document.createElementNS(svgns, 'path');
          line.setAttributeNS(null, 'd', 'M ' + x1 + ',' + y1 + ' L ' + x2 + ',' + y2);
          line.setAttributeNS(null, 'stroke-width', settings.strokeWidth);
          line.setAttributeNS(null, 'stroke', settings.strokeColor);
          line.setAttributeNS(null, 'class', "line off")
          if (settings.svgId) {
            document.getElementById(settings.svgId).appendChild(line);
          } else {
            document.getElementById($el).appendChild(line);
          }
          var length = line.getTotalLength();
          line.setAttributeNS(null, 'stroke-dasharray', length);
          line.setAttributeNS(null, 'stroke-dashoffset', length);
        }

        function animate() {
          var time = settings.animationTime;
          if (settings.animationTimeRange) {
            time = Math.floor(Math.random() * (settings.animationTimeRange[1] - settings.animationTimeRange[0] + 1) + settings.animationTimeRange[0])
            //console.log(time);
          }
          jQuery('.line.off').each(function() {
            jQuery(this).addClass('on').removeClass('off');
            jQuery(this).animate({
              'stroke-dashoffset': 0
            }, time, settings.easing);
            var $this = jQuery(this);
            setTimeout(function() {
              $this.fadeOut(settings.fadeOutTime, function() {
                jQuery(this).remove();
              });
            }, settings.lifeTime)
          });
        }



        interval = setInterval(function() {
          creatLine(settings.width, settings.height);
          animate();
        }, settings.interval);
      };
    }(jQuery));
  </script>
  <script type="text/javascript">
    $('#ckLine').ckLine({
      leftRight: false,
      strokeColor: 'orange',
      interval: 800,
      animateTime: 1600,
      animationTimeRange: [800, 1600]
    });
  </script>
</body>

</html>